<template>
    <div class="coo-list-wrap filter-form">
        <div>
            <div class="condition">
                <div class="title">备库列表</div>
                <el-select v-model="queryParams.db_type" placeholder="数据库类型" clearable>
                    <el-option v-for="(val, key) in typeList" :key="key" :label="val" :value="key" />
                </el-select>
                <el-button type="warning" style="margin-left: 10px;">
                    <i class="el-icon-plus" style="margin-right: 5px;"></i>创建备库
                </el-button>
                <el-button style="margin-left: 10px;">
                    <i class="el-icon-refresh" style="margin-right: 5px;"></i>刷新
                </el-button>
                <el-button type="primary">启动</el-button>
                <el-button type="primary">关闭</el-button>
            </div>
            <div class="table-container">
                <el-table v-loading="loading" :border="true" :data="tableData"  height="280px" :header-cell-style="{background:'#D8E8FF'}">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column type="index" label="序号" width="50" align="center" />
                    <el-table-column prop="name" label="名称"  width="160" align="center" min-width="200" />
                    <el-table-column prop="id" label="备库ID" width="100" align="center" />
                    <el-table-column prop="main_db" label="主库定义名" width="160" align="center" />
                    <el-table-column prop="status" label="状态" width="200" align="center" />
                    <el-table-column prop="type" label="数据库类型" min-width="100" align="center" />
                    <el-table-column prop="version" label="数据库版本" width="160" align="center" />
                    <el-table-column prop="ip" label="IP"  width="200" align="center" min-width="200" />
                    <el-table-column prop="post" label="端口" min-width="100" align="center" />
                    <el-table-column prop="cpu" label="CPU核数" min-width="100" align="center" />
                    <el-table-column prop="remark" label="操作" min-width="120" align="center" />
                </el-table>
                <div class="pagination-container">
                    <pagination-control
                        :paging-params="pagingParams"
                        @onCurrentPage="handleCurrentChange"
                        @onCurrentSize="handleSizeChange"
                    />
                </div>
            </div>
        </div>
        <div>
            <div class="condition" style="padding-top: 0px !important;">
                <div class="title">备库详情</div>
                <el-select v-model="backup_db" placeholder="备库列表" clearable>
                    <el-option v-for="(val, key) in dbList" :key="key" :label="val" :value="key" />
                </el-select>
                <el-button style="margin-left: 10px;">
                    <i class="el-icon-refresh" style="margin-right: 5px;"></i>刷新
                </el-button>
            </div>
            <div class="panel">
                <el-row :gutter="20">
                    <el-col :span="12" class="info" style="text-align: center;">
                        <el-row class="info-content">
                            <el-col :span="8">主库名称：pg10</el-col>
                            <el-col :span="8"><div style="height: 12px !important;"></div></el-col>
                            <el-col :span="8">备库名称：pg12stb01</el-col>
                        </el-row>
                        <el-row class="info-content">
                            <el-col :span="8">IP地址：10.197.164.111</el-col>
                            <el-col :span="8"><div style="height: 12px !important;"></div></el-col>
                            <el-col :span="8">IP地址：10.197.164.128</el-col>
                        </el-row>
                        <el-row class="info-content">
                            <el-col :span="8"><img src="@/assets/data.png" alt="" width="100px"></el-col>
                            <el-col :span="8" style="padding-top: 10px;">
                                <div><img src="@/assets/pass.png" alt="" width="40px"></div>
                                接受速度：7646.00KB/scope
                            </el-col>
                            <el-col :span="8"><img src="@/assets/data_backup.png" alt="" width="100px"></el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="12" class="info" style="background: rgb(241,245,247);">
                        <div class="info-title">备库实时信息</div>
                        <el-row class="info-content">
                            <el-col :span="6">最后刷新时间：</el-col>
                            <el-col :span="6">12/17/2020 19:46:18</el-col>
                        </el-row>
                        <el-row class="info-content">
                            <el-col :span="6">日志应用LSN：</el-col>
                            <el-col :span="6">0/8A734CC0</el-col>
                            <el-col :span="6">接受日志LSN：</el-col>
                            <el-col :span="6">0/8A734CC0</el-col>
                        </el-row>
                        <el-row class="info-content">
                            <el-col :span="6">日志应用LSN速度：</el-col>
                            <el-col :span="6">7646.00 KB/s</el-col>
                            <el-col :span="6">接受日志LSN速度：</el-col>
                            <el-col :span="6">7646.00 KB/s</el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import PaginationControl from "@/layout/paginationControl.vue"
  
export default {
    components: {
        PaginationControl,
    },
    data: function() {
        return {
            pagingParams: {
                page: 1,
                size: 20,
                total: 3
            },
            queryParams: {
                db_type: null,
            },
            typeList: {
                10: "Oracle",
                20: "MySQL",
                30: "redis",
            },
            backup_db: 3,
            dbList: {
                1: "stback01",
                2: "pgstb02",
                3: "pg12stb01",
            },
            tableData: [
                {
                    "name": "stback01",
                    "id": "1",
                    "main_db": "pg10",
                    "status": "正常运行",
                    "type": "MySQL",
                    "version": "8.0.13",
                    "ip": "10.197.164.125",
                    "post": "1521",
                    "cpu": "1",
                },
                {
                    "name": "pgstb02",
                    "id": "1",
                    "main_db": "pg10",
                    "status": "正常运行",
                    "type": "MySQL",
                    "version": "8.0.13",
                    "ip": "10.197.164.127",
                    "post": "5432",
                    "cpu": "1",
                },
                {
                    "name": "pg12stb01",
                    "id": "1",
                    "main_db": "pg10",
                    "status": "正常运行",
                    "type": "MySQL",
                    "version": "8.0.13",
                    "ip": "10.197.164.128",
                    "post": "5432",
                    "cpu": "2",
                }
            ]
        }
    },
    mounted() {
        
    },
    methods: {
        
    },
}
</script>

<style lang="less" scoped>
@import "~@/assets/css/scrollbar.css";
.coo-list-wrap {
	height: 100%;
	width: 100%;
    // position: relative;
    background-color: #fff;
    .title {
        color: #333333;
        font-size: 18px;
        font-weight: 600;
        line-height: 32px;
        margin-right: 20px;
    }
    .table-container {
        padding: 0px 30px;
        .el-table {
            font-size: 12px !important;
        }
    }
    .condition {
        padding: 30px;
        display: flex;
    }
    .panel {
        margin: 0px 30px;
        border: 1px solid #ebe7e7;
		background-color: #fff;
		padding: 20px;
        .info {
            padding: 30px 20px !important;
            font-size: 16px;
            .info-title {
                color: #303133;
                font-weight: 700;
                margin-bottom: 30px;
            }
            .info-content {
                color: #606266;
                margin-bottom: 30px;
            }
        }
	}
    ::v-deep {
		.condition {
			.el-form-item {
				margin-bottom: 0;
				padding-top: 6px;
				padding-bottom: 6px;
                height: 32px;
			}
			.el-form-item__label {
				font-size: 12px;
				font-weight: normal;
			}
            .el-input__icon {
                line-height: 32px;
            }
            .el-input--suffix .el-input__inner {
                height: 32px;
            }
        }
	}
}
.el-button {
    border-radius: 5px;
    font-size: 12px;
    padding: 9px 15px;
    &.el-button--primary.is-plain{
        color: #409EFF;
        background: #E9F2FF;
        border: 1px solid #C4E1FF;
    }
    &.el-button--warning{
        background: #ec821f;
    }
}
//表格内容颜色
::v-deep .el-table__body tbody tr:nth-child(odd) {
    background-color: #FFFFFF;
}
::v-deep .el-table__body tbody tr:nth-child(even) td {
    background-color: #F1F8FF;
}
//表头文字样式
::v-deep .el-table__header-wrapper {
    thead {
        th{
            div{
            // font-weight: 700;
            // font-size: 20px;
            color: #333333
            }
        }
    }
}
</style>